<template>
  <view>
    <tm-sheet
      :margin="[20]"
      :round="3"
      :shadow="2"
      v-for="(item, index) in props.list"
      :key="index"
      @click="toDetail(item)"
    >
      <view class="flex">
        <view class="icon-img">
          <img
            v-if="item.taskType == '加用户'"
            src="../../../static/add-icon.png"
            alt=""
            class="icon-img"
          />
          <img
            src="../../../static/apply.png"
            alt=""
            class="icon-img"
            v-else
          />
        </view>
        <view class="m-l-10 flex-list">
          <tm-text
            _class="text-overflow-1 text-weight-b m-b-3"
            parentClass="wd200"
            :label="item.title.replace(/.*\]\s*-*\s*/, '')"
          ></tm-text>
          <view class="flex m-b-3 tag-position">
            <tm-tag
              v-for="tag in item.groupTags"
              :key="tag"
              outlined
              :shadow="0"
              color="#366EF4"
              :margin="[5, 10]"
              font-color="#366EF4"
              border-color="#366EF4"
              size="xs"
              :label="tag"
            ></tm-tag>
          </view>
          <tm-text
            :font-size="24"
            color="grey"
            _class="text-overflow-1"
            :label="item.remark"
          ></tm-text>
        </view>
        <view class="m-r-info">
          <view>
            <tm-text
              :font-size="24"
              color="grey"
              :label="showChatTime(item.updateTime)"
            ></tm-text>
          </view>
          <view
            v-if="
              (props.tagActive === 'create' || props.tagActive === 'done') &&
                item.status >= 100
            "
          >
            <tm-text
              :font-size="24"
              color="green"
              :label="'审批完成'"
            ></tm-text>
          </view>
        </view>
      </view>
    </tm-sheet>
  </view>
</template>
<script lang="ts" setup>
import { showChatTime } from '@/utils/tools'
import { ref } from 'vue'
import { XWorkTask } from '../../../ts/base/schema'

type Props = {
  list: XWorkTask[] // 卡片正文列表
  tagActive: string //当前选择的tab选项卡
}

const props = defineProps<Props>()
/** 进入审批页面 */
const jumpData = ref('')
async function toDetail(data: any) {
  if (props.tagActive === 'commons') {
    jumpData.value = data
    uni.navigateTo({
      url: '/pages/work-pages/webview',
      success: res => {
        res.eventChannel.emit('workInfo', data)
      }
    })

    return
  }
  switch (data.taskType) {
    case '加用户':
    case '事项':
      uni.navigateTo({
        url: '/pages/work-pages/detail',
        success: res => {
          res.eventChannel.emit('workDetail', [data])
        }
      })
      return
    default:
      uni.showToast({
        title: '请先前往PC端进行操作',
        icon: 'none'
      })
      return
  }
}
</script>
<style>
.flex {
  display: flex !important;
  justify-content: space-between;
}
.flex-list {
  width: 195px;
}
.icon-img {
  width: 50px;
  height: 50px;
}

/*  #ifdef H5   */
.icon-img {
  width: 50px;
  height: 50px;
  margin-right: 6px;
}
/*  #endif  */

.tag-position {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.m-r-info {
  margin-left: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
</style>
